<template>
<div>
		<h3>我是主页</h3>
	<ul>
		<li><a v-link="{path:'/home/login'}">登录</a></li>
		<li><a v-link="{path:'/home/reg'}">用户注册</a></li>
	</ul>
	<div class="box">
		<router-view></router-view>
	</div>
	<div>
		<button @click="buttoncli">全屏</button>
	</div>
	<div>
    <div v-if='!isFullscreen'> 非全屏状态</div>
    <div v-if='isFullscreen'> 全屏状态</div>

  </template>
  </div>
</div>
</template>

<script>
import screenfull from 'screenfull'

export default {
  data () {
    return {
      isFullscreen: false
    }
  },
  methods: {
    buttoncli () {
      if (!screenfull.enabled) { // 如果不允许进入全屏，发出不允许提示
        this.$message({
          message: '不支持全屏',
          type: 'warning'
        })
        return false
      }
      screenfull.toggle()
      this.$message({
        message: '全屏啦',
        type: 'success'
      })
    }
  }
}
</script>


<style scope>
.box {
  border: 1px dashed #000;
}
</style>